<template>
    <div>
        <mt-field label="商户号" placeholder="请输入商户号" v-model="mchtId"></mt-field>
        <mt-field label="账号" placeholder="请输入账号" v-model="usrAcc"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="loginPwd"></mt-field>
        <button type="submit" @click="bindAccount">绑定</button>
    </div>
</template>

<script>
    import * as types from '../../vuex/types.js';
    import getDate4 from '../../service/getData4.js';
    import {mapState} from 'vuex'
    import {Toast} from 'mint-ui'

    export default {
        data: () => ({
            loginPwd: "",
            mchtId: "",
            usrAcc: "",
        }),
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        methods: {
            //验证表单
            rule() {
                //验证非空项
                if (!this.mchtId || !this.mchtId || !this.loginPwd) {
                    Toast({
                        message: "填写项不能为空",
                        duration: 800
                    });
                    return false
                }
                //验证商户号长度
                if (this.mchtId.length < 8 || this.mchtId.length > 11) {
                    Toast({
                        message: "商户号错误",
                        duration: 800
                    });
                    return false
                }
                //验证密码长度
                if (this.loginPwd.length < 8 || this.loginPwd.length > 15) {
                    Toast({
                        message: "密码错误",
                        duration: 800
                    });
                    return false
                }
                return true
            },
            async bindAccount() {
                if (!this.rule()) {
                    return
                }
                let result = await getDate4.setBindAccount({
                    usrId: this.userInfo.usrId,
                    mchtId: this.mchtId,
                    usrAcc: this.usrAcc,
                    loginPwd: this.loginPwd
                });
                if (result.respCode === "00") {
                    Toast({
                        message: "绑定成功",
                        duration: 800
                    });
                    setTimeout(() => {
                        this.$router.go(-1);
                    },1000)
                } else {
                    Toast({
                        message: result.errorInfo,
                        duration: 800
                    });
                }

            }
        },
        created() {
        },
        mounted() {
            this.$store.commit(types.HEAD_TEXT, "个人中心");
            this.$store.commit(types.HEAD_BACK_ICON, true);
            this.$store.commit(types.HEAD_MES_ICON, false);
        }
    }
</script>
<style lang="scss" scoped>

    button[type='submit'] {
        width: 95%;
        height: 2.5rem;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
        margin: 1rem 0.5rem;
        background-color: #f55581;
        color: #fff;

    }


</style>
